<template>
<div class="sign-wrapper">
  <div class="sign-in" v-if="!hasLogin">
    <div class="tip">
      <p>请务必填写您的真实信息，</p>
      <p>不然一不小心中奖了怎么办呐？</p>
    </div>
    <div class="form">
      <div class="form-control" >
        <div v-show="!validatings.phone" class="tip-warning js-phone-warning">手机号不对哦，请确认一下</div>
        <input type="number" placeholder="您的手机号码" name="phone" v-model="phone" autofocus="autofocus" @keyup="changeCheckbtn">
      </div>
      <div class="form-control">
        <div v-show="!validatings.checkcode" class="tip-warning">验证码不对哦，请确认一下</div>
        <div class="form-control-checkcode">
          <input type="text" name="checkcode" v-model="checkcode" placeholder="验证码">
          <a href="javascript:;" @click="getCheckCode" class="checkcode-btn js-checkcodeBtn" :class="{active: (showCheckcodebtn==true&&checkcodeBtnPressed==false), pressed: (showCheckcodebtn==true&&checkcodeBtnPressed==true)}" disabled="true">
              获取验证码 <span v-if="validatings.phone==true&&checkcodeBtnPressed==true" v-text="counts"></span> 
          </a>
        </div>
      </div>
      <div class="form-control">
        <label>
          手机号为唯一兑奖凭证，请先确保填写无误
        </label>
      </div>
      <div class="form-control">
        <a class="btn-img" href="javascript: void 0;" @click="submit">下一步</a>
      </div>
    </div>
  </div> <!---->
   <div class="edit-address" v-if="!data.hasAddress && hasLogin" >
    <lottery-address addr-tips="请填写您的详细地址" @submit="afterLotteryAddressUpdated"></lottery-address>
  </div>    
</div>
</template>

<script>
  import { signIn, getCheckcode } from 'services/lottery';
  import LotteryAddress from './lottery-address';
  import trim from 'lodash.trim';

  export default {
    components: { LotteryAddress },
    props: {
      data: {
        type: Object,
        default: () => ({})
      }
    },    
    data() {
      return {
        counts: 60,
        phone: '',
        uname: '',
        checkcode: '',
        validatings: {
          phone: true,
          checkcode: true,
          ismatch: true
        },
        hasLogin: false,
        showCheckcodebtn: false,
        checkcodeBtnPressed: false,
        checkcodeButton: document.querySelector('.js-checkcodeBtn') || document.createElement('a')
      };
    },
    methods: {
      submit() {
        if (this.progressing) {
          return;
        }
        this.progressing = true;
        this.phone = trim(this.phone);
        this.checkcode = trim(this.checkcode);
        if (/^\d{11}$/.test(this.phone) && this.checkcode.length > 0) {
          signIn({
            phone: this.phone,
            checkcode: this.checkcode
          }).then(({ status, user }) => {
            this.progressing = false;
            if (status === 1) {
              this.data.hasAddress = user.hasAddress;
              this.validatings.ismatch = true;
              this.$emit('signin-submit', user);
              this.phone = '';
              this.hasLogin = true;
              this.validatings.checkcode = true;
            }
            if (status === -1) {
              this.validatings.phone = false;
            }
            if (status === -6) {
              this.validatings.checkcode = false;
            }
            if (status === -3) {
              this.validatings.ismatch = false;
            } else {
              this.validatings.ismatch = true;
            }
          });
        } else {
          this.progressing = false;
          this.validatings.ismatch = true;
          this.validatings.checkcode = false;
        }
        this.validatings.phone = /^\d{11}$/.test(this.phone);      
      },
      getCheckCode() {
        let checkCodebtn = this.checkcodeButton;
        let phoneWarning = document.querySelector('.js-phone-warning');
        this.phone = trim(this.phone);

        console.log(this.showCheckcodebtn==true&&this.checkcodeBtnPressed==true);
        if(checkCodebtn && checkCodebtn.getAttribute('disabled')=='false') {
          getCheckcode({
            account: this.phone,
            type:1
          }).then(({status, msg}) => {
            if(status<=0) {
              this.validatings.phone = false;
            }
            if(status===-2 || status === -1 || status === -3) {
              phoneWarning.innerHTML = msg;
            }          
            if(status===1) {
              checkCodebtn.setAttribute('disabled', true);
              this.validatings.phone = true;
              if(this.counts<60) {
                this.counts = 60; 
              }
              this.countDown();             
            }
            this.checkcodeBtnPressed = true;
          })          
        }

      },
      changeCheckbtn() {
        this.phone = trim(this.phone);
        if (/^\d{11}$/.test(this.phone)) {
          this.showCheckcodebtn = true;
          this.validatings.phone = true;
          this.checkcodeButton.setAttribute('disabled', false);
        } else {
          this.showCheckcodebtn = false; 
          this.checkcodeButton.setAttribute('disabled', true);
        }
        this.checkcodeBtnPressed = false;        
      },
      afterLotteryAddressUpdated(hasAddress) {
        this.data.hasAddress = hasAddress;
        this.$emit('lottery-address-updated', hasAddress);
      },
      countDown() {
        var clock = setInterval(() => {
          if(this.counts>0) {
            this.counts = this.counts-1;
             this.checkcodeButton.setAttribute('disabled', true);
          } else {
            clearInterval(clock);
            this.counts = 60;
            this.checkcodeBtnPressed = false;
            this.checkcodeButton.setAttribute('disabled', false);              
          }            
        }, 1000) 
      }
    }
  }
</script>

<style scoped lang="scss">
  $font-active-color: #973aa8;

  img {
    width: 100%;
    height: auto;
  }
  p {
    margin: 0;
    line-height: 1.4;
  }
  label {
    color: rgb(174, 127, 192);
    font-size: 0.33rem;
  }
  .sign-wrapper {
    margin-top: .6rem;
    background: url("~pages/app/assets/images/bg-red.png")  no-repeat top left;
    background-size: cover;    
  }
  .edit-address {    
    padding: .7rem .5rem .6rem;
  }
  .sign-in {
    position: relative;
    text-align: center;
    font-size: 0.45rem;
    padding: 1rem 0.5rem 1.12rem 0.5rem;
    box-sizing: border-box;
    .tip {
      color: #ffffff;
      padding-bottom: .45rem;
    }
  }
  .tip-warning {
    color: #70ff8e;
    font-size: 0.33rem;
    margin-bottom: 0.3rem;
  }
  .form-control {
    display: block;
    input[type=text], input[type=number] {
      width: 100%;
      font-size: 0.51rem;
      text-align: center;
      color: #2a2a2a;
      height: 1.35rem;
      border-radius: 0.16rem;
      border: none;
      padding: 0;
    }
    &:not(:last-child) {
      margin-bottom: 0.3rem;
    }
  }
  .btn-img {
    display: inline-block;
    width: 8.8rem;
    height: 1.5rem;
    line-height: 1.5rem;
    margin-top: .6rem;
    color: $font-active-color;
    font-size: .45rem;
    font-weight: bold;
    text-decoration: none;
    background: url('~pages/app/assets/images/btn-go-to-lottery.png') no-repeat;
    background-size: 8.8rem 1.5rem;
  }
  .form-control-checkcode {
    font-size: 0;
    input[name="checkcode"] {
      width: 4.1rem;
    }
  }
  .checkcode-btn {
    display: inline-block;
    margin-left: .6rem;
    width: 4.1rem;
    height: 1.35rem;
    line-height: 1.35rem;
    font-size: 0.5rem;
    text-decoration: none;
    color: #fff;
    background: #c3c3c3;
    border-radius: .16rem;
    vertical-align: top;
    &.active {
      background: url('~pages/app/assets/images/checkcode-bg.png') no-repeat;
      background-size: 4.09rem 1.35rem;
    }
    &.pressed {
      background: url('~pages/app/assets/images/checkcode-pressed-bg.png') no-repeat;
      background-size: 4.09rem 1.35rem;      
    }
  }
</style>

<style lang="scss">
  .modal .sign-wrapper {
    margin-top: 1.96rem;
  }
</style>
